<template>
  <div>
     <div class="list-btn">
      起止日期:<DatePicker type="date" @on-change="startTime"  placeholder="选择时间" style="width: 200px"></DatePicker>
      ～<DatePicker  type="date" @on-change="endTime"  placeholder="选择时间" style="width: 200px" ></DatePicker>
    </div>
    <!-- <div class="list-btn">
       类型:
       <Select v-model="params.type"  style="width:200px" clearable>
          <Option  v-for="(item,index) in excountList" :key="index" :value="index+1">{{item}}</Option>
        </Select>
    </div> -->
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
     <p style="font-size:14px;margin-bottom:3px">
      总计：总充值金额 <span style="color:#ed4014;font-weight:600">{{itotal}}</span>元 ；总消费金额 <span style="color:#ed4014;font-weight: 600">{{pay_total}}</span> 元
      ；总剩余金额 <span style="color:#ed4014;font-weight: 600">{{rest_total}}</span> 元
    </p>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.page = $event; getList(url)" @changePageSize="params.pageSize = $event; getList(url)"></page-button>
  </div>
</template>
<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import expandRow from './expand.vue';
  import $ from 'jquery'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      expandRow
    },
    data(){
      return {
        url:'/admin/statistics',
        countUrl:'',
        countTime:'',
        countType:'',
        titleType:'',
        show:false,
        recordTotal:0,
        itotal:'',
        pay_total:'',
        rest_total:'',
        tag: {
          'title': '消费明细',
          'path': '/work/admin/statistics'
        },
        recordData:[],
        record: {
          //status:'',
          page: 1,
          pageSize: 10
        },
        excountList:['短信验证码','活体','手机三要素','银行卡','运营商','淘宝','风控'],
        params: {
          page: 1,
          pageSize: 10
        },
         listTitle: [
           {
              type: 'expand',
              width: 50,
              render: (h, params) => {
                  return h(expandRow, {
                      props: {
                          row: params.row
                      }
                  })
              }
          },
        // {
        //   title: "时间",
        //   key: "date",
        //   align: "center",
        //   minWidth:130,
        //   // render:(h,params) => {
        //   //     return h('div',params.row.date.split(' ')[0])
        //   // }
        // },
        {
          title: "商户名称",
          key: "merchant",
          align: "center",
          minWidth:100,
        },
        {
          title: "充值次数 / 充值金额(元)",
          align: "center",
          minWidth:120,
          render:(h,params) => {
            this.itotal = this.toYuan(params.row.total);
            this.pay_total = this.toYuan(params.row.pay_total);
            this.rest_total = (this.itotal-this.pay_total).toFixed(2);
            return h('div',params.row.recharge_num +' / '+ this.toYuan(params.row.recharge_money))
          }
        },
        {
          title: "消费次数 / 消费金额(元)",
          key: "date",
          align: "center",
          minWidth:120,
           render:(h,params) => {
            return h('div',params.row.expense_num +' / '+ this.toYuan(params.row.expense_money))
          }
        },
        {
          title: "剩余金额(元)",
          key: "date",
          align: "center",
          minWidth:120,
           render:(h,params) => {
            return h('div',this.toYuan(params.row.amount))
          }
        },
        // {
        //   title: "类型",
        //   key: "type",
        //   align: "center",
        //   minWidth:100,
        //   render:(h,params) => {
        //     return h('div',this.getCount(params.row.type))
        //   }
        // },
        //  {
        //   title: "操作",
        //   key: "action",
        //   minWidth: 100,
        //   align: "center",
        //   render: (h, params) => {
        //     return h("div", [
        //       h(
        //         "Button",
        //         {
        //           props: {
        //             type: "primary",
        //             size: "small",
        //           },
        //           style: {
        //             marginRight: "5px"
        //           },
        //           on: {
        //             click: () => {
        //               this.countType =  params.row.type;
        //               this.countTime =  params.row.date.split(' ')[0];
        //               this.getRecordMan();
        //               this.titleType = this.getCount(params.row.type);
        //               console.log(this.titleType,'title');
        //             }
        //           }
        //         },
        //         "查看详情"
        //       ),
        //     ]);
        //   }
        // }
      ],
      }
    },
    created() {
      this.getUrl();
    },
    methods: {
      getRecordMan(page = '1'){
          let data ={
            type : this.countType,
            time : this.countTime,
            page : page,
            pageSize : '10'
          }
          $.ajax({
            type: "get",
            url: this.countUrl,
            data: data,
            success:(res) => {
              console.log(res,'success');
              this.recordData = res.data.result.data;
              this.recordTotal = res.data.total;
              this.show = true;
            }
          })
      },
      getUrl(){
        this.$get('/merchant/url').then(res => {
          if(res.code == 0){
            this.countUrl = res.data.url
          }
          console.log(res,'jjj');
        })
      },
      changeRecordNum(value){
        this.record.page = value;
        this.getRecordMan(this.record.page);
      },
      submitModal(){
        // this.$refs.formRole.validate((valid) => {
        //   if(valid){
            let data = this.formRole;
            this.$post('/audit/audit',data).then(res => {
              console.log(res,'审核');
              if(res.code == 0){
                // this.$Message.success(res.msg);
                this.show = false;
                this.resetValidate('formRole');
                this.$Message.success("审核完成");
                this.getList(this.url)
              }else if(res.code == 1){
                 this.$Message.error(res.msg);
                 this.show = true;
                //  this.resetValidate('formRole');
                //  this.orderData =[];
              }else{
                this.$Message.error(res.msg);
                this.show = false;
                this.resetValidate('formRole');
              }
            })
        //   }
        // })
      },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

  /deep/ .ivu-upload.ivu-upload-select{
  .picture {
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: inline-block;
    border:1px dashed #eaeaea;
  }
  .avatar, .avatar-uploader{
    width:100%;
    height:100%;
  }
}
</style>
